<!DOCTYPE html>
<!-- saved from url=(0073)http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=stretch -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	
	<title>Playit</title>
	<link rel="stylesheet" type="text/css" href="./1-align-items_files/tryit.css"> 
	<script src="./1-align-items_files/ca-pub-5751451760833794.js.下载"></script><script type="text/javascript">
	<!--
	function playit_onload()
	{
	var preval=""
	preval=document.getElementById("preselectedValue").value
	if (preval!="")
		{
		change_position(preval)
		var x=document.getElementsByTagName("input")
		var l=x.length
		for (i=0;i<l;i++)
			{
			if (x[i].value==preval)
				{
				x[i].checked=true
				}
			}
			document.getElementById("playitcontainer").style.display="block";
			}
	}
	
	function click_position(obj)
	{
	change_position(obj.value)
	}
	
	function change_position(val)
	{
	
		var s="demoDIV";
		
			s="main";
		
		document.getElementById(s).style.alignItems=val;
		
	var x="align-items:<span id='enlargecssprop'>" + val + "</span>";
	var y="div#main<br>		{<br>		display:flex;		<br>		###CSSPROP###;<br>		}<br>";
	var z=y.replace("###CSSPROP###",x);
	
		document.getElementById("styleDIV").innerHTML=z;
	
	}
	
	//-->
	</script>
	<style> 
	body
	{
	font-family:verdana;
	font-size:12px;
	}
	
	#playitcontainer
	{
	width:974px;
	background-color:#e5eecc;
	border:1px solid #98bf21;
	margin:auto;
	
	}
	
	#enlargecssprop
	{
	font-weight:bold;
	font-size:14px;
	color:#000000;
	}
	
	#demoDIV
	{
	margin-left:10px;
	margin-top:3px;
	background-color:#ffffff;
	border:1px solid #c3c3c3;
	height:280px;
	width:430px;
	
	}
	
	div#main
		{
		display:flex;		
		align-items:center;
		}	
	
	#styleDIV
	{
	font-family:courier new;
	margin-left:10px;
	background-color:#f1f1f1;
	border:1px solid #c3c3c3;
	width:424px;
	padding:3px;
	color:#222222;
	}
	
	div.demoHeader
	{
	font-size:14px;
	margin-top:5px;
	margin-left:5px;
	margin-bottom:2px;
	color:#617f10;
	}
	
	div.playitFooter
	{
	font-size:13px;
	color:#617f10;
	padding:10px;
	}
	
	#pfooter
	{
	margin:15px;
	}
	
	div#main
		{
		width:100%;
		height:278px;
		border:1px solid black;
		}
		div#main div
		{
		flex: 1;
		}
	</style>
	

	</head>
	<body>
	
	<div style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;">
	<div style="width:974px;height:94px;position:relative;margin:0px;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;padding:0px;overflow:hidden;">
		<!-- TryitLeaderboard -->
		<div id="div-gpt-ad-1383036313516-0" style="width:970px; height:90px;">
			<script async="" src="./1-align-items_files/adsbygoogle.js.下载"></script>
<!-- demo测试页广告 -->
<ins class="adsbygoogle" style="display: inline-block; min-width: 300px; max-width: 970px; width: 970px; height: 90px;" data-ad-client="ca-pub-5751451760833794" data-ad-slot="6979016065" data-adsbygoogle-status="done"><ins id="aswift_0_expand" style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:970px;background-color:transparent"><ins id="aswift_0_anchor" style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:970px;background-color:transparent"><iframe width="970" height="90" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;width:970px;height:90px;" src="./1-align-items_files/saved_resource.html"></iframe></ins></ins></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>		</div>
		<div style="clear:both"></div>
	</div>
	</div>

	<div id="playitcontainer" style="display: block;">
	
		<div style="width:450px;float:left;">
				<div class="demoHeader">CSS 属性:</div>
				<div style="font-size:14px;margin:10px;font-weight:bold;">align-items:</div>				
				
				<form style="margin:15px;" action="javascript:return false;">
				                                         <input type="hidden" id="preselectedValue" value="stretch">
	
					<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_1" value="flex-start" checked="checked"><label for="value_1">flex-start</label></div>
					
					<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_2" value="flex-end"><label for="value_2">flex-end</label></div>
					
					<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_3" value="stretch"><label for="value_3">stretch</label></div>
					
					<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_4" value="baseline"><label for="value_4">baseline</label></div>
					
					<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_5" value="center"><label for="value_5">center</label></div>
					
					<div><input autocomplete="off" type="radio" name="radio_position" onclick="click_position(this)" id="value_6" value="initial"><label for="value_6">initial</label></div>
								
				</form>
				<div id="pfooter"></div>
		</div>
		<div style="width:450px;float:left;">
			<div class="demoHeader">结果:</div>
	
			<div id="demoParent">
				<div id="demoDIV"><div>
	<div id="main" style="align-items: stretch;">
		<div style="background-color:coral;">RED</div>
		<div style="background-color:lightblue;">BLUE</div>
		<div style="background-color:lightgreen;">Green div with more content.</div>
	</div>
</div></div>
			</div>
			<div class="demoHeader">CSS 代码:</div>
			<div id="styleDIV">div#main<br>		{<br>		display:flex;		<br>		align-items:<span id="enlargecssprop">stretch</span>;<br>		}<br></div>
		</div>
		<div style="clear:both;"></div>
	
		<div class="playitFooter" style="float:left;">点击上面的属性值然后查看效果</div>
		<div class="playitFooter" style="text-align:right;">
			<a style="color:#617f10" href="http://www.w3cschool.cc/">
			w3cschool.cc</a> - 测试
		</div>
		<div style="clear:both;"></div>
	</div>
<script type="text/javascript">playit_onload()</script>
	


</body></html>